let imgs = [{
        src: 'https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    },
    {
        src: 'https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    },
    {
        src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80',
    },
    {
        src: 'https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80',
    },
    {
        src: 'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    },

]

let app = document.getElementById('app')

function createElement(tag_name, attr) {
    let tag = document.createElement(tag_name)

    for (const key in attr) {
        tag.setAttribute(key, attr[key])
    }
    return tag
}

imgs.forEach((item, index) => {
    let img_item = createElement('div', { class: 'img_item' })
    img_item.style.backgroundImage = `url(${item.src})`
    if (index == 0) {
        img_item.classList.add('active')
    }
    app.appendChild(img_item)
})

let img_list = document.getElementsByClassName('img_item')


img_list = Array.prototype.slice.call(img_list, 0)

img_list.forEach((item, index) => {
    item.onclick = function() {
        img_list.forEach((e, i) => {
            if (i != index) {
                e.classList.remove('active')
            }
        })
        this.classList.add('active')
    }

    item.onmouseover = function() {
        img_list.forEach((e, i) => {
            if (i != index) {
                e.classList.remove('active')
            }
        })
        this.classList.add('active')
    }
})